<template>
  <view class="custom-input flex-row">
    <tm-input style="flex: 1" v-model="inputStr" v-bind="$attrs" @input="inputHandle"></tm-input>
    <view class="search-btn" @tap="searchClick" v-if="isShowSearch">
      <slot>搜索</slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  isShowSearch: {
    type: Boolean,
    default: false
  }
});

const inputStr = ref("");
const emits = defineEmits(["update:modelValue", "searchClick"]);
// 搜索按钮的点击事件
function searchClick() {
  emits("searchClick", inputStr.value);
}

// 输入框的输入事件
function inputHandle(e: any) {
  emits("update:modelValue", e);
}
watch(
  () => props.modelValue,
  () => {
    inputStr.value = props.modelValue;
  },
  {
    immediate: true
  }
);
</script>
<style lang="scss" scoped>
.custom-input {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 10rpx 20rpx;
}
.search-btn {
  margin-left: 20rpx;
}
</style>
